import { Divider, Radio, Table, Button, Checkbox } from 'antd';
import type { ColumnsType } from 'antd/es/table';
import { useUnitContext } from '../UnitContext';
import React, { useState, PropsWithChildren, useMemo, useRef } from 'react';
import { allowStateReadsEnd } from 'mobx/dist/internal';
import Modals from './Modal';
const { Column } = Table;
interface DataType {
  key: React.Key;
  name: string;
  age: number;
  address: string;
}

const TableList = () => {
  const {
    listQuery,
    tableList,
    total,
    editTableItem,
    receiveModeFilter,
    statusFilter,
    delTableItem,
    setListQuery
  } = useUnitContext();
  // console.log('父组件渲染', tableList);
  const formModalRef = useRef<{ setOpen: any }>();
  const activeEditDataRef = useRef<any>();
  activeEditDataRef.current = {};
  const [isModalOpens, setisModalOpens] = useState(false);
  const [forms, setforms] = useState();
  const [data, setdata] = useState();
  const getisModalOpen = (form: any) => {};
  const [ids, setIds] = useState(null);
  const [num, setnum] = useState(0);
  // 编辑按钮
  const showForm = (text: any) => {
    setisModalOpens(true);
    setdata(text);
    console.log(text);
    setnum(2);
  };
  // 新建按钮
  const showModal = () => {
    setisModalOpens(true);
    setnum(1);
  };
  const rowSelection = {
    onChange: (selectedRowKeys: React.Key[], selectedRows: DataType[]) => {
      console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
      console.log(selectedRowKeys);
      setIds(selectedRowKeys);
    },
    getCheckboxProps: (record: DataType) => ({
      disabled: record.name === 'Disabled User', // Column configuration not to be checked
      name: record.name
    })
  };

  return (
    <div style={{ marginLeft: '30px', flex: 'none' }}>
      <div style={{ display: 'flex', justifyContent: 'space-between' }}>
        <h1 style={{ fontSize: '16px' }}>电子档案接收</h1>
        <div>
          <Button type="primary" onClick={showModal} style={{ marginRight: '5px' }}>
            新建
          </Button>
          <Modals
            num={num}
            data={data}
            getisModalOpen={getisModalOpen}
            isModalOpens={isModalOpens}
            onClose={() => setisModalOpens(false)}
          />
          <Button
            onClick={() => {
              delTableItem(ids);
            }}
          >
            删除
          </Button>
        </div>
      </div>
      <Table
        rowKey="id"
        rowSelection={{
          type: 'checkbox',
          ...rowSelection
        }}
        dataSource={tableList}
        bordered
        style={{
          flex: 'none'
        }}
      >
        <Column title="序号" align="center" dataIndex="id" key="id" />
        <Column title="名称" align="center" dataIndex="name" key="name" />
        <Column
          title="接收方式"
          align="center"
          dataIndex="receiveMode"
          key="receiveMode"
          render={(text: number) => {
            // eslint-disable-next-line no-unused-expressions
            return <Button>{text === 0 ? '离线接收' : '在线接收'}</Button>;
          }}
        />
        <Column
          title="数据包类型"
          align="center"
          dataIndex="receiveType"
          key="receiveType"
          render={(text: any) => {
            if (text === 1) {
              return '条目与原文';
            } else if (text === 2) {
              return '光盘格式';
            } else if (text === 3) {
              return 'SIP包格式';
            } else if (text === 4) {
              return 'DBF数据库格式';
            }
          }}
        />
        <Column title="来源单位" align="center" key="fondName" dataIndex={['fonds', 'fondName']} />
        <Column
          title="所属全宗"
          align="center"
          dataIndex="fonds"
          key="fonds"
          render={(text: any) => {
            return '河北省档案局';
          }}
        />
        <Column
          title="档案类型"
          align="center"
          key="archiveType"
          dataIndex="archiveType"
          render={(text: any) => {
            return '普通档案类型';
            // if (text.type === 1) {
            //   return '普通档案类型';
            // } else if (text.type === 2) {
            //   return '档案征集档案类型';
            // } else if (text.type === 3) {
            //   return '资料库档案类型';
            // }
          }}
        />
        <Column title="创建时间" align="center" key="createTime" dataIndex="createTime" />
        <Column title="批次" align="center" key="batchNo" dataIndex="batchNo" />
        <Column title="名称" align="center" key="age" dataIndex="age" />
        <Column
          title="状态"
          align="center"
          key="status"
          dataIndex="status"
          render={(text: any) => {
            // eslint-disable-next-line no-unused-expressions
            if (text === 0) {
              return <Button>待上传</Button>;
            } else if (text === 1) {
              return <Button>待入库</Button>;
            } else if (text === 2) {
              return <Button>入库失败</Button>;
            } else if (text === 3) {
              return <Button>已入库</Button>;
            } else if (text === 4) {
              return <Button>已撤回</Button>;
            }
          }}
        />
        <Column title="档案包上传" align="center" key="age" dataIndex="age" />
        <Column title="附件" align="center" key="age" dataIndex="age" />
        <Column title="审核" align="center" key="address" dataIndex="address" />
        <Column
          title="操作"
          align="center"
          key="age"
          render={(text: any) => {
            // console.log(text);
            return <Button onClick={() => showForm(text)}>编辑</Button>;
          }}
        />
      </Table>
    </div>
  );
};

export default TableList;
